<template>
  <div class="siteMaintenance">
    <!-- 头部 --start-->
    <div class="nav">
      <p>
        <span>.</span>
        站点信息
      </p>
      <div id="nav_go5">
        <el-button
          type="info"
          icon="el-icon-back"
          class="btn_fanhui"
          @click="revert()"
        >返回
        </el-button
        >
      </div>
    </div>
    <!--主题内容部分开始-->
    <div class="Main">
      <!--      <p>基本信息</p>-->
      <div class="header">
        <ul>
          <li>
            <span>输入搜索 :</span>
            <el-input style="width: 70%;" placeholder="请输入站点名称" v-model="key_site"></el-input>
            <el-button @click="searchSite">搜索</el-button>
          </li>
        </ul>
      </div>
      <div class="intermediate">
        <template>
          <el-table
            :data="tableData_site"
            style="width: 100%">
            <el-table-column
              type="index"
              label="序号"
              width="180"
              align="center">
            </el-table-column>
            <el-table-column
              prop="siteNumber"
              label="站点编号"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="siteName"
              align="center"
              label="名称">
            </el-table-column>
            <el-table-column
              prop="account"
              align="center"
              label="负责人">
            </el-table-column>
            <el-table-column
              prop="siteResponsiblePhone"
              align="center"
              label="联系方式">
            </el-table-column>
            <el-table-column
              prop="area"
              align="center"
              label="所在区域">
            </el-table-column>
            <el-table-column
              prop="areaResponsible"
              align="center"
              label="区域负责人">
            </el-table-column>
            <el-table-column
              prop="address" align="center"
              label="状态">
              <template v-slot="scope">
                <span v-if="scope.row.status==1">待审核</span>
                <span v-if="scope.row.status==2">驳回</span>
                <span v-if="scope.row.status==3">启用</span>
                <span v-if="scope.row.status==4">关闭</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="address" align="center"
              label="操作">
              <template slot-scope="scope">
                <el-switch
                  v-if="scope.row.status==3||scope.row.status==4"
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  :active-value="3"
                  :inactive-value="4"
                  @change=changeSwitchStatue(scope.row,scope.row.status)
                  inactive-color="RGB(223,230,232)">
                </el-switch>
                <el-button size="mini" plain @click="XgXqList(scope.row.id,0)">修改</el-button>
                <el-button size="mini" type="text" @click="XgXqList(scope.row.id,1)">详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
    </div>
  </div>
</template>


<script>
import axios from "axios";

export default {
inject:['reload'],

  data() {
    return {
      key_site:"",
      textarea: "",
      tableData_site: [],
      imgpathfull2: "",
      imgpathfull1: "",
      value: true
    };
  },
  created() {
    this.getList("");
  },
  methods: {
    searchSite(){
      this.getList(this.key_site);
    },
    changeSwitchStatue(e, statue) {
      console.log(e, statue)
      axios.get("/JX_java/afferSale/site/updateSiteStatus?siteId="+e.id+"&&status="+statue).then(res=>{
        if (res.data.data == "操作成功") {
          this.$message.success(res.data.data)
          this.reload();
        }else{
          this.$message.error(res.data.data)
        }
      })
    },
    getList(key) {
      let param = {
        "beginTime": "",
        "endTime": "",
        "key": this.key_site,
        "pageNum": 0,
        "pageSize": 0,
        "type": 0
      }
      axios.post("/JX_java/afferSale/site/getSiteListAll", param).then(res => {
        console.log(res.data.data)
        this.tableData_site = res.data.data.content
      })
    },
    XgXqList(id, edit) {
      this.$router.push({
        path: './StationServiceXG',
        query: {id: id, edit: edit}
      })
    },
    //返回
    revert() {
      this.$router.go(-1);
    },
  }
}

</script>
<style lang="scss" scoped>
@import "@/assets/scss/base.scss";

.nav {
  height: 60px;
  padding: 0 1%;
  position: relative;

  p {
    height: 40px;
    margin: 10px 0;
    line-height: 40px;

    span {
      background: $Header_color;
      color: $Header_color;
    }
  }

  #nav_go5 {
    position: absolute;
    top: 10px;
    right: 1%;

    img {
      height: 16px;
      padding-right: 10px;
    }
  }
}

.Main {
  width: 98%;
  //margin-left: 10px;
  margin: auto;
  background: #fff;

  p {
    //text-align: center;
    font-weight: 700;
    font-size: 20px;
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    margin-left: 15px;
    padding-bottom: 15px;
    padding-top: 15px;
  }

  .header {
    border-bottom: 1px solid rgb(220, 222, 226);
    width: 98%;
    //margin-left: 15px;
    padding-bottom: 20px;
    padding-top: 10px;
    margin: auto;

    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      color: #909399;
      margin-top: 20px;

      li {
        width: 40%;
        font-size: 14px;
        margin-bottom: 10px;
        text-align: center;

        span {
          display: inline-block;
          width: 15%;
        }
      }
    }
  }

  .intermediate {
    padding-bottom: 20px;
    margin-top: 10px;

    /deep/ .is-leaf {
      text-align: center;
      background: #fff;
    }
  }
}

.el-button {
  margin-left: 5px;
}

</style>
